<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台管理页面</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		html, body {
			height: 100%;
			overflow: hidden;
		}

		body {
		}

		.clearfix:after,
		.clearfix:before {
			content: "";
			display: table;
			clear: both;
		}

		#wrap {
			width: 100%;
			height: 100%;
			overflow: auto;
		}

		#wrap > div.sidebar {
			width: 300px;
			background-color: #18273b;
			float: left;
			height: 100%;
			overflow: auto;
			overflow-x: hidden;
		}

		#wrap > div.content {
			height: 100%;
			overflow-y: auto;
		}

		div.head {
			height: 75px;
			text-align: right;
			padding-top: 20px;
			padding-right: 20px;
			box-sizing: border-box;

		}

		div.head span {
			display: inline-block;
			height: 36px;
			width: 37px;
			background: url("./img/xuebitu.png") no-repeat;
			margin-right: 55px;

		}

		.content > div.show {
			background-image: linear-gradient(#dbdfe1, #f4f8fb 10px);
			box-sizing: border-box;
			border-radius: 10px;
			padding: 10px 15px 0 40px;
			min-width: 1620px;
			overflow: auto;
		}

		.content > div.show > .title {
			height: 60px;
			color: #36bbb5;
			font: 24px/60px "微软雅黑";
			border-bottom: 1px black solid;

		}

		.content > div.show > .sub_title {
			border-left: 6px #36bbb5 solid;
			color: #36bbb5;
			height: 20px;
			font: 18px/20px "微软雅黑";
			margin: 18px 0;
			padding-left: 10px;

		}

		.sidebar > .user_head {
			margin-top: 75px;
			width: 300px;
			height: 280px;
			position: relative;
			color: #ffffff;
			font-size: 24px;

			text-align: center;
		}

		.sidebar > div.user_head:before {
			content: '';
			display: block;
			position: absolute;
			width: 300px;
			height: 280px;
			background-image: url(img/user_head_bg.png);
			background-size: 300px 280px;
			opacity: .1;
		}

		.sidebar > .user_head > img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin-top: 60px;
			margin-bottom: 30px;
		}

		.count {
			width: 320px;
			height: 160px;
			background-color: rgba(54, 187, 181, 0.9);
			border-radius: 12px;
			box-shadow: -2px 2px 10px #36bbb5, -20px 22px white;
			margin: 0 30px 40px 30px;
			float: left;
			font: 18px 微软雅黑;
			color: white;
			padding-top: 25px;
			box-sizing: border-box;
		}

		.show > div:nth-of-type(2) {
			background-color: rgba(254, 120, 122, 0.9);
			box-shadow: -2px 2px 10px rgb(254, 120, 122), -20px 22px white;

		}

		.show > div:nth-of-type(3) {
			background-color: rgba(236, 146, 224, 0.9);
			box-shadow: -2px 2px 10px rgb(236, 146, 224), -20px 22px white;

		}

		.show > div:nth-of-type(4) {
			background-color: rgba(251, 187, 110, 0.9);
			box-shadow: -2px 2px 10px #fbbb6e, -20px 22px white;

		}

		.count > div {

		}

		.count > div.unit {
			float: right;

			margin-right: 30px;

		}

		.count > div.computed_title {

			margin-left: 30px;
			overflow: auto;

		}

		.count > h1 {
			margin-top: 20px;
			text-align: center;
			font-size: 48px;
		}

		.public_long_chart {
			width: 1500px;
			height: 420px;
			border-bottom: 9px #36bbb5 solid;
			border-radius: 6px;
			overflow: auto;
			background-color: #ffffff;
		}


		.show .line_chart {


		}

		.show .options {
			height: 80px;
			line-height: 80px;
			font-family: 微软雅黑, serif;
			padding-left: 28px;

		}

		.chart_container {
			height: 340px;
		}

		.options label {
			color: #666666;
			font-size: 16px;

		}

		.options select {
			width: 220px;
			height: 38px;
			border: 1px #e4e4e4 solid;
			border-radius: 5px;
			margin-left: 10px;
			margin-right: 40px;
			font: 16px/38px 微软雅黑;
			color: #333333;
			padding-left: 8px;
			box-sizing: border-box;
		}

		.options select option {

		}

		.options span {
			width: 66px;
			height: 38px;
			display: inline-block;
			border: #36bbb5 1px solid;
			text-align: center;
			color: #333333;
			font: 16px/38px 微软雅黑;
			border-radius: 6px;
			margin-left: 10px;
		}

		.options span.offset {
			margin-left: 520px;
		}

		span.active {
			background-color: #36bbb5;
			color: #fffefe;
		}

		.player_data_public {
			height: 378px;
			box-sizing: border-box;

			background-color: #ffffff;
			border-radius: 8px;
			border-bottom: #36bbb5 9px solid;
		}

		.item_list {
			float: left;
			width: 412px;
			padding-top: 27px;
		}

		.item_list .item {
			width: 162px;
			height: 100px;
			box-sizing: border-box;
			float: left;
			margin: 30px 0 40px 30px;
			border: 1px #e8e5e9 solid;
			border-radius: 8px;
			position: relative;
			text-align: center;
			padding: 20px 45px;
		}

		.item_list .item .font {
			background-color: #fe787a;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			position: absolute;
			left: 7px;
			top: -20px;
			line-height: 40px;
			text-align: center;
			color: rgba(255, 255, 255, .7);
			font-size: 20px;
		}

		.item_list .item .title {
			color: #333333;
			font: 16px 微软雅黑;
		}

		.item_list .item .number {
			color: #fe787a;
			font: 24px 微软雅黑;
			margin-top: 10px;
		}

		.reset {
			margin-left: 10px;
		}

		.histogram {
			width: 1065px;
			overflow: auto;
			margin-left: 20px;
			float: left;
		}

		.histogram_chart {
			height: 298px;
		}

		.buttom_chart {
			margin-top: 20px;
			float: left;
			margin-bottom: 40px;
		}

	</style>
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
	<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>

</head>
<body>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  (function() {
    var dom = document.querySelector('.chart_container')
    var myChart = echarts.init(dom)
    var app = {}
    option = null
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option, true)
    }
  })();

  (function() {
    var dom = document.querySelector('.histogram_chart')
    var myChart = echarts.init(dom)
    var app = {}
    app.title = '坐标轴刻度与标签对齐'

    option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }
      ]
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option, true)
    }

  })();

  (function() {
    var dom = document.querySelector('.buttom_chart .chart_container')
    var myChart = echarts.init(dom)
    var app = {}
    option = {
      title: {
        text: '天气情况统计',
        subtext: '虚构数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['西凉', '益州', '兖州', '荆州', '幽州']
      },
      series: [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [
            {
              value: 1548,
              name: '幽州',
              label: {
                normal: {
                  formatter: [
                    '{title|{b}}{abg|}',
                    '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                    '{hr|}',
                    '  {Sunny|}{value|202}{rate|55.3%}',
                    '  {Cloudy|}{value|142}{rate|38.9%}',
                    '  {Showers|}{value|21}{rate|5.8%}'
                  ].join('\n'),
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                      width: '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {}
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {}
                    },
                    Showers: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {}
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                      width: 40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                      width: 40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              }
            },
            { value: 535, name: '荆州' },
            { value: 510, name: '兖州' },
            { value: 634, name: '益州' },
            { value: 735, name: '西凉' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    if (option && typeof option === 'object') {
      myChart.setOption(option, true)
    }

  })()

  layui.use('element', function() {
    var element = layui.element

    //一些事件监听
    element.on('tab(demo)', function(data) {
      console.log(data)
    })
  })


</script>


</body>
</html>
